<template>
	<view class="uiwu uiwu-ios">
		<swiper class="uiwu-swiper">
			<swiper-item>
				<image :src="`${uiwu.imgUrl}taskbg.png`" mode="scaleToFill" style=""></image>
			</swiper-item>
		</swiper>
		<view class="uiwu-tab uiwu-flex-align">
			<view class="item" :class="activeIndex == 1 ? 'active' : ''" @tap.stop="swiperTap(1)">
				<text class="uiwu-flex-center">每日任务</text>
				<text></text>
			</view>
			<view class="item" :class="activeIndex == 2 ? 'active' : ''" @tap.stop="swiperTap(2)">
				<text class="uiwu-flex-center">成长任务</text>
				<text></text>
			</view>
		</view>
		<view class="uiwu-list">
			<view class="item uiwu-flex-space" v-for="(item, index) in listData" :key="index">
				<view class="left uiwu-flex-column">
					<text>{{ item.name }}</text>
					<text>奖励{{ item.reward }} {{ app.coin_name }}</text>
				</view>
				<view class="right" @tap.stop="lingquTap(item, index)"
					v-if="item.is_finish == 1 && item.receive_status == 0">
					<text>领取</text>
					<text></text>
				</view>
				<view class="right active" v-if="item.is_finish == 1 && item.receive_status == 1">已领取</view>
				<view class="right active" @tap.stop="completeFun(item)"
					v-if="item.is_finish == 0 && item.task_form == 4">
					<text>去完成</text>
					<text></text>
				</view>
				<view class="right" v-if="item.is_finish == 0 && item.task_form != 4">
					未完成
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { taskAd, tasklist, taskreceive, uiwu } from '@/api/interface/interface';
import { configStore } from '@/store/configStore';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref, inject } from "vue";
const activeIndex = ref<number>(1)
const { app } = configStore();
const listData = ref<Array<object>>([])
const pageNum = ref<number>(1)
const more = ref<string>('loading');
const isLock = ref<boolean>(true)
const adInfo = ref(null)
const items = ref(null)
const completeFun = (item) => {
	uiwu.loading('加载中...', true)
	items.value = item
	adInfo.value.show()
}
/**
 * 领取奖励
 */
const lingquTap = async ({ user_task_id, receive_status, task_form }, index: number): Promise<any> => {
	if (receive_status == 1) return
	const result = await taskreceive({ user_task_id, task_form });
	if (!result) return
	uiwu.toast('领取成功')
	listData.value[index].receive_status = 1;
	listData.value[index].is_finish = 1;
}
const swiperTap = (index: number) => {
	activeIndex.value = index
	listData.value = []
	gettasklist()
}
const gettasklist = async (mack: boolean = false) => {
	if (!mack) pageNum.value = 1
	const { data: { data ,  total } } = await tasklist({
		page: pageNum.value,
		task_type: activeIndex.value
	});
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}
onReachBottom(() => {
	if (!isLock.value) return
	isLock.value = false
	pageNum.value++
	gettasklist(true)
})
onLoad(() => {
	gettasklist()
	taskAd().then(({ data: { adUnitId } }) => {
		// #ifdef MP-TOUTIAO
		adInfo.value = tt.createRewardedVideoAd({ adUnitId })
		adInfo.value.onError((err) => {
			console.log(err);
			uiwu.hideloading()
			switch (err.errCode) {
				case 1004:
					uiwu.toast('暂无广告')
					break;
				default:
					uiwu.toast('更多请参考错误码文档')
			}
		})
		adInfo.value.onClose((res) => {
			console.log(res);
			uiwu.hideloading()
			if (res.isEnded) {
				lingquTap(items.value)
			} else {
				uiwu.toast('中途退出不能获取奖励')
			}
		});
		adInfo.value.load()
		// #endif
	})
})
</script>

<style lang="scss">
page {
	background-color: #e6e6e6;
}

.uiwu-swiper {
	width: 100%;
	height: 249px;

	image {
		width: 100%;
		height: 249px;
	}
}

.uiwu-tab {
	padding: 30rpx 24rpx;

	.item {
		width: 172rpx;
		position: relative;
		margin-right: 30rpx;
		height: 56rpx;

		text {
			width: 172rpx;
			height: 56rpx;
			background: #F1F1F1;
			border-radius: 100rpx;
			border: 3rpx solid #231815;
			left: -3rpx;
			top: -4px;
			z-index: 6;
			position: absolute;
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;

			&:nth-child(2) {
				z-index: 5;
				left: 3rpx;
				top: 4rpx;
				background: #FFFFFF;
			}
		}

		&.active {
			text {
				background: $qj-red;
				color: #FFFFFF;

				&:nth-child(2) {
					background: $qj-red-shadow;
				}
			}
		}

	}
}

.uiwu-list {
	background-color: #fff;
	padding: 0 24rpx;

	.item {
		padding: 24rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.left {
			flex: 1;

			text {
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;

				&:nth-child(2) {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.right {
			font-size: 28rpx;
			font-weight: 500;
			color: $qj-red;
			position: relative;
			width: 154rpx;
			height: 48rpx;
			text-align: right;

			&.active {
				color: #666666;
			}

			text {
				text-align: center;
				width: 154rpx;
				height: 48rpx;
				border: 3rpx solid #231815;
				border-radius: 29rpx;
				position: absolute;
				left: -2rpx;
				top: -4.5rpx;
				z-index: 9;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;

				&:nth-child(1) {
					background-color: $qj-red;
				}

				&:nth-child(2) {
					background-color: $qj-red-shadow;
					z-index: 8;
					left: 2rpx;
					top: 4.5rpx;
				}
			}
		}
	}
}
</style>
